<style lang="scss">
  .nq-home {
    width: 100%;
    .top-div {
      width: 100%;
      // border-bottom: 1px dotted #dddddd;
    }
    .top-div-item {
      // height: 100%;
      // vertical-align: middle;
      padding: 12px 0 0 0;
      border-right: 1px dotted #dddddd;
      border-bottom: 1px dotted #dddddd;
      .top-div-item-box {
        float: left;
      }
      .top-div-icon {
        text-align: center;
        width: 45%;
        height: 72px;
        line-height: 76px;
        .top-icon {
          font-size: 36px;
        }
      }
      .top-div-name-value {
        text-align: left;
        width: 55%;
        .top-value {
          display: block;
          height: 30px;
          line-height: 30px;
          font-size: 22px;
          font-weight: bold;
        }
        .top-name {
          display: block;
          height: 30px;
          line-height: 30px;
          font-size: 16px;
        }
      }
    }
    .center-div {
      width: 100%;
      overflow: hidden;
      margin-top: 7px;
      // border-top: 1px dotted #dddddd;
      border-bottom: 1px dotted #dddddd;
      .center-item {
        float: left;
        width: 50%;
        border-right: 1px dotted #dddddd;
      }
      .warning-div {
        .dept-day-chart-div {
          width: 100%;
          height: 360px;
          padding-top: 20px;
        }
      }
      .overdue-div {
        .overdue-chart-div {
          width: 100%;
          height: 360px;
          padding-top: 20px;
        }
      }
      .satisfy-div {
        .satisfy-chart-div {
          width: 100%;
          height: 360px;
          padding-top: 20px;
        }
      }
      .state-div {
        .state-chart-div {
          width: 100%;
          height: 360px;
          padding-top: 20px;
        }
      }
      // .source-div {
      //   width: 35%;
      //   .source-chart-div {
      //     width: 100%;
      //     height: 360px;
      //     padding-top: 20px;
      //   }
      // }
    }
    .bottom-div {
      width: 100%;
      overflow-x: hidden;
      // margin-top: 7px;
      // border-top: 1px dotted #dddddd;
      border-bottom: 1px dotted #dddddd;
      margin-bottom: 77px;
      .bottom-item {
        float: left;
      }
      .emp-number-div {
        width: 100%;
        .emp-number-chart-div {
          width: 100%;
          height: 400px;
          padding-top: 20px;
        }
      }
    }
  }
</style>

<template>
  <div class="nq-home">
    <!-- 年月日类别超期件统计 -->
    <div class="top-div">
      <el-row>
        <el-col :span="6"
                class="year-div top-div-item"
                style="color: #B6A2DE">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-date top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.yearCount ? ymdTypeDueCountData.yearCount : 0}}</span>
            <span class="top-name">本年 (件)</span>
          </div>
        </el-col>
        <el-col :span="6"
                class="month-div top-div-item"
                style="color: #5AB1EF;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-date top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.monthCount ? ymdTypeDueCountData.monthCount : 0}}</span>
            <span class="top-name">本月 (件)</span>
          </div>
        </el-col>
        <el-col :span="6"
                class="day-div top-div-item"
                style="color: #2EC7C9;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-date top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.dayCount ? ymdTypeDueCountData.dayCount : 0}}</span>
            <span class="top-name">本日 (件)</span>
          </div>
        </el-col>
        <el-col :span="6"
                class="year-div top-div-item"
                style="color: #D87A80;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-time top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.overdueCount ? ymdTypeDueCountData.overdueCount : 0}}</span>
            <span class="top-name">超期件 (件)</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
                class="tsjb-div top-div-item"
                style="color: #97B552;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-error top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.complaintCount ? ymdTypeDueCountData.complaintCount : 0}}</span>
            <span class="top-name">投诉举报 (件)</span>
          </div>
        </el-col>
        <el-col :span="6"
                class="jyyj-div top-div-item"
                style="color: #E5CF0D;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-share top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.adviseCount ? ymdTypeDueCountData.adviseCount : 0}}</span>
            <span class="top-name">建议意见 (件)</span>
          </div>
        </el-col>
        <el-col :span="6"
                class="zxfw-div top-div-item"
                style="color: #FFB980;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-question top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.questionCount ? ymdTypeDueCountData.questionCount : 0}}</span>
            <span class="top-name">咨询服务 (件)</span>
          </div>
        </el-col>
        <el-col :span="6"
                class="year-div top-div-item"
                style="color: #AA8C8A;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-scissors top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.unsatisfyCount ? ymdTypeDueCountData.unsatisfyCount : 0}}</span>
            <span class="top-name">不满意件 (件)</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 各处室今日预警统计 -->
    <div class="center-div">
      <el-row class="center-item warning-div"
              v-loading="loadingWarningDiv">
        <el-col :span="24">
          <div class="dept-day-chart-div"
               ref="deptDayChartDiv"
               id="deptDayChartDiv"></div>
        </el-col>
      </el-row>
      <el-row class="center-item overdue-div"
              v-loading="loadingOverdueDiv">
        <el-col :span="24">
          <div class="overdue-chart-div"
               ref="overdueChartDiv"
               id="overdueChartDiv"></div>
        </el-col>
      </el-row>
      <!-- <el-row class="center-item source-div" v-loading="loadingSourceDiv">
        <el-col :span="24">
          <div class="source-chart-div" ref="sourceChartDiv" id="sourceChartDiv"></div>
        </el-col>
      </el-row> -->
    </div>
    <div class="center-div">
      <el-row class="center-item satisfy-div"
              v-loading="loadingSatisfyDiv">
        <el-col :span="24">
          <div class="satisfy-chart-div"
               ref="satisfyChartDiv"
               id="satisfyChartDiv"></div>
        </el-col>
      </el-row>
      <el-row class="center-item state-div"
              v-loading="loadingStateDiv">
        <el-col :span="24">
          <div class="state-chart-div"
               ref="stateChartDiv"
               id="stateChartDiv"></div>
        </el-col>
      </el-row>
    </div>
    <!-- 处室办理量统计 -->
    <div class="bottom-div">
      <el-row class="bottom-item emp-number-div"
              v-loading="loadingNumberDiv">
        <el-col :span="24">
          <div class="emp-number-chart-div"
               ref="empNumberChartDiv"
               id="empNumberChartDiv"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  // 引入基本模板
  // 引入环形图图组件
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/chart/line'
  // 引入提示框和title组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  let echarts = require('echarts/lib/echarts')

  export default {
    data () {
      return {
        // 用户信息
        userInfo: JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO')),
        // 登录处室信息
        deptPojo: {
          deptId: ''
        },
        // 年月日类型超期件统计
        ymdTypeDueCountData: {
          yearCount: '',
          monthCount: '',
          dayCount: '',
          complaintCount: '',
          adviseCount: '',
          questionCount: '',
          overdueCount: '',
          unsatisfyCount: ''
        },
        // 加载中
        loadingWarningDiv: false,
        loadingOverdueDiv: false,
        loadingSatisfyDiv: false,
        loadingStateDiv: false,
        loadingSourceDiv: false,
        loadingNumberDiv: false,
        // 今日预警处室列表
        deptEmpDayListData: [],
        // 超期件处室列表
        deptEmpDueListData: [],
        // 不满意件处室列表
        deptEmpSatisfyListData: [],
        // 工单办理状态列表
        stateListData: [],
        // 工单来源统计
        sourceData: {
          name: '',
          value: ''
        },
        // 处室办理量统计
        deptWorkEffiecyData: {
          empName: '',
          blNum: '',
          efficiency: '',
          unsatisfy: ''
        }
      }
    },
    methods: {
      // 年月日类型超期件统计
      getYmdTypeDueCountsFn () {
        this.deptPojo.deptId = this.userInfo.xtbmid
        this.$axios.post(this.$api.homeCharts.deptYmdTypeDueCharts, this.deptPojo).then(rs => {
          if (rs) {
            this.ymdTypeDueCountData = Object.assign(this.ymdTypeDueCountData, rs)
          }
        })
      },
      // 处室今日预警环形图
      getDeptDayCharts () {
        this.loadingWarningDiv = true
        this.deptPojo.deptId = this.userInfo.xtbmid
        this.$axios.post(this.$api.homeCharts.deptEmpDayWarningCharts, this.deptPojo).then(rs => {
          if (rs) {
            // console.log(rs)
            this.deptEmpDayListData = Object.assign(this.deptEmpDayListData, rs)
            this.loadingWarningDiv = false
            // console.log(this.deptEmpDayListData);
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.deptDayChartDiv)
            if (!myChart) return
            // 绘制图表
            let i = 0
            let colorsList = ['#D87A80', '#FFB980', '#E5CF0D', '#97B552', '#2EC7C9', '#5AB1EF', '#B6A2DE'].reverse()
            myChart.setOption({
              noDataLoadingOption: {
                text: 'Excellent~~~今日无未办理工单',
                effect: 'bubble',
                effectOption: {
                  effect: {
                    n: 0
                  }
                }
              },
              title: {
                text: '今日预警',
                x: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              calculable: true,
              series: [
                {
                  name: '今日待处理工单',
                  type: 'pie',
                  radius: ['30%', '60%'],
                  center: ['50%', '52%'],
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'inner',
                        textStyle: {
                          fontSize: 12,
                          // fontWeight : 'bolder',
                          fontFamily: 'Microsoft YaHei,微软雅黑'
                        },
                        formatter: '{b}:{c}'
                      },
                      labelLine: {
                        show: false
                      },
                      // 自定义颜色数组
                      color: function () {
                        return colorsList[i++]
                      }
                    }
                  },
                  data: this.deptEmpDayListData
                }
              ]
            })
          }
        })
      },
      // 处室超期环形图
      getDeptOverdueCharts () {
        this.loadingOverdueDiv = true
        this.deptPojo.deptId = this.userInfo.xtbmid
        this.$axios.post(this.$api.homeCharts.deptEmpOverdueCharts, this.deptPojo).then(rs => {
          if (rs) {
            this.deptEmpDueListData = Object.assign(this.deptEmpDueListData, rs)
            this.loadingOverdueDiv = false
            // console.log(this.deptEmpDueListData);
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.overdueChartDiv)
            if (!myChart) return
            // 绘制图表
            let i = 0
            let colorsList = ['#D87A80', '#FFB980', '#E5CF0D', '#97B552', '#2EC7C9', '#5AB1EF', '#B6A2DE']
            myChart.setOption({
              noDataLoadingOption: {
                text: 'Perfect~~~无超期工单',
                effect: 'bubble',
                effectOption: {
                  effect: {
                    n: 0
                  }
                }
              },
              title: {
                text: this.$moment().format('YYYY') + '年超期件统计',
                x: 'center'
              },
              // {value:335, name:'直接访问'},
              // {value:310, name:'邮件营销'},
              // {value:234, name:'联盟广告'},
              // {value:135, name:'视频广告'},
              // {value:1548, name:'搜索引擎'}

              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
              },
              calculable: true,
              series: [
                {
                  name: '工单超期件统计',
                  type: 'pie',
                  radius: ['30%', '60%'],
                  center: ['50%', '52%'],
                  roseType: 'radius',
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        // position : 'inner',
                        textStyle: {
                          fontSize: 14,
                          fontWeight: 'bolder',
                          fontFamily: 'Microsoft YaHei,微软雅黑'
                        },
                        formatter: '{b}：{c}'
                      },
                      labelLine: {
                        show: true
                      },
                      // 自定义颜色数组
                      color: function () {
                        return colorsList[i++]
                      }
                    }
                  },
                  data: this.deptEmpDueListData
                }
              ]
            })
          }
        })
      },
      // 不满意件统计
      getDeptSatisfyCharts () {
        this.loadingSatisfyDiv = true
        this.deptPojo.deptId = this.userInfo.xtbmid
        this.$axios.post(this.$api.homeCharts.deptEmpSatisfyCharts, this.deptPojo).then(rs => {
          if (rs) {
            this.deptEmpSatisfyListData = Object.assign(this.deptEmpSatisfyListData, rs)
            this.loadingSatisfyDiv = false
            // console.log(this.deptEmpSatisfyListData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.satisfyChartDiv)
            if (!myChart) return
            // 绘制图表
            let i = 0
            let colorsList = ['#D87A80', '#FFB980', '#E5CF0D', '#97B552', '#2EC7C9', '#5AB1EF', '#B6A2DE'].reverse()
            myChart.setOption({
              title: {
                text: this.$moment().format('YYYY') + '年不满意件统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              // legend: {
              //   y: "bottom",
              //   selectedMode: false, //取消图例上的点击事件
              //   data: ["待办理", "办理中", "已办理"]
              // },
              calculable: true,
              series: [
                {
                  name: '工单不满意件统计',
                  type: 'pie',
                  radius: ['30%', '60%'],
                  center: ['50%', '52%'],
                  roseType: 'radius',
                  data: this.deptEmpSatisfyListData,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        // position: "inner",
                        textStyle: {
                          fontSize: 14,
                          fontWeight: 'bolder',
                          fontFamily: 'Microsoft YaHei,微软雅黑'
                        },
                        formatter: '{b}：{c}'
                      },
                      labelLine: {
                        show: true
                      },
                      // 自定义颜色数组
                      color: function () {
                        if (i == 7) i = 0
                        return colorsList[i++]
                      }
                    },
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            })
          }
        })
      },
      // 状态统计
      getStateCharts () {
        this.loadingStateDiv = true
        this.deptPojo.deptId = this.userInfo.xtbmid
        this.$axios.post(this.$api.homeCharts.deptEmpStateCharts, this.deptPojo).then(rs => {
          if (rs) {
            this.stateListData = Object.assign(this.stateListData, rs)
            this.loadingStateDiv = false
            // console.log(this.stateListData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.stateChartDiv)
            if (!myChart) return
            // 绘制图表
            let i = 0
            let colorsList = ['#FFB980', '#5AB1EF', '#97B552']
            myChart.setOption({
              title: {
                text: this.$moment().format('YYYY') + '年办理情况统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              // legend: {
              //   y: "bottom",
              //   selectedMode: false, //取消图例上的点击事件
              //   data: ["待办理", "办理中", "已办理"]
              // },
              calculable: true,
              series: [
                {
                  name: '工单办理情况统计',
                  type: 'pie',
                  radius: ['30%', '60%'],
                  center: ['50%', '52%'],
                  data: this.stateListData,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        // position: "inner",
                        textStyle: {
                          fontSize: 14,
                          fontWeight: 'bolder',
                          fontFamily: 'Microsoft YaHei,微软雅黑'
                        },
                        formatter: '{b}：{c}'
                      },
                      labelLine: {
                        show: true
                      },
                      // 自定义颜色数组
                      color: function () {
                        return colorsList[i++]
                      }
                    },
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            })
          }
        })
      },
      // 工单来源统计
      getSourceCharts () {
        this.loadingSourceDiv = true
        this.deptPojo.deptId = this.userInfo.xtbmid
        this.$axios.post(this.$api.homeCharts.deptEmpSourceCharts, this.deptPojo).then(rs => {
          if (rs) {
            this.sourceData = rs
            this.loadingSourceDiv = false
            // console.log(this.sourceData);
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.sourceChartDiv)
            if (!myChart) return
            // 绘制图表
            myChart.setOption({
              title: {
                text: this.$moment().format('YYYY') + '年工单渠道来源统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              calculable: false,
              grid: {
                top: '32px',
                bottom: '36px',
                left: '112px',
                right: '99px',
                containLabel: false
              },
              xAxis: {
                type: 'value',
                name: '数量(件)',
                axisLabel: {
                  // 调整y轴的lable
                  textStyle: {
                    fontSize: 14 // 让字体变大
                  }
                },
                nameTextStyle: {
                  fontSize: 14,
                  fontFamily: 'Microsoft YaHei,微软雅黑'
                }
              },
              yAxis: {
                type: 'category',
                data: this.sourceData.name.split(','),
                axisLabel: {
                  // 调整x轴的lable
                  interval: 0, // 全部显示
                  clickable: false, // 可点击
                  textStyle: {
                    fontSize: 14 // 让字体变大
                  }
                }
              },
              series: [
                {
                  name: '工单渠道来源',
                  type: 'bar',
                  data: this.sourceData.value.split(','),
                  barCategoryGap: '50%',
                  itemStyle: {
                    normal: {
                      color: '#5AB1EF',
                      label: {
                        show: true,
                        position: 'right',
                        fontSize: 14 // 让字体变大
                      }
                    }
                  }
                }
              ]
            })
          }
        })
      },
      // 各处室工单办理量统计
      getDeptNumberCharts () {
        this.loadingNumberDiv = true
        this.deptPojo.deptId = this.userInfo.xtbmid
        this.$axios.post(this.$api.homeCharts.deptEmpWorkEfficiencyCharts, this.deptPojo).then(rs => {
          this.deptWorkEffiecyData = rs
          this.loadingNumberDiv = false
          // console.log(this.deptWorkEffiecyData)
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(this.$refs.empNumberChartDiv)
          if (!myChart) return
          // 绘制图表
          myChart.setOption({
            title: {
              text: this.$moment().format('YYYY') + '年工单处理量统计',
              x: 'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              y: 'bottom',
              textStyle: {
                fontSize: 16,
                fontFamily: 'Microsoft YaHei,微软雅黑'
              },
              data: ['数量(件)', '处理时效(天)']
            },
            grid: {
              y: '48px',
              y2: '36px',
              x: '56px',
              x2: '56px',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: this.deptWorkEffiecyData ? this.deptWorkEffiecyData.empName.split(',') : [],
              axisLabel: {
                // 调整x轴的lable
                interval: 0, // 全部显示
                clickable: false, // 可点击
                textStyle: {
                  fontSize: 12 // 让字体变大
                },
                rotate: 20
              }
            },
            yAxis: [
              {
                type: 'value',
                name: '数量(件)',
                axisLabel: {
                  // 调整y轴的lable
                  textStyle: {
                    fontSize: 14 // 让字体变大
                  }
                },
                nameTextStyle: {
                  fontSize: 14,
                  fontFamily: 'Microsoft YaHei,微软雅黑'
                }
              },
              {
                type: 'value',
                name: '处理时效(天)',
                axisLabel: {
                  formatter: '{value}',
                  textStyle: {
                    fontSize: 16 // 让字体变大
                  }
                },
                nameTextStyle: {
                  fontSize: 16,
                  fontFamily: 'Microsoft YaHei,微软雅黑'
                }
              }
            ],
            series: [
              {
                data: this.deptWorkEffiecyData ? this.deptWorkEffiecyData.blNum.split(',') : [],
                name: '数量(件)',
                type: 'bar',
                barCategoryGap: '50%',
                itemStyle: {
                  normal: {
                    color: '#5AB1EF',
                    label: {
                      show: true,
                      position: 'top',
                      fontSize: 16 // 让字体变大
                    }
                  }
                }
              },
              {
                data: this.deptWorkEffiecyData ? this.deptWorkEffiecyData.efficiency.split(',') : [],
                name: '处理时效(天)',
                type: 'line',
                smooth: true,
                yAxisIndex: 1,
                itemStyle: {
                  normal: {
                    color: '#2EC7C9',
                    label: {
                      show: true,
                      position: 'top',
                      textStyle: {
                        fontSize: 16,
                        fontWeight: 'bolder',
                        fontFamily: 'Microsoft YaHei,微软雅黑'
                      },
                      formatter: '{c}'
                    }
                  }
                }
              }
            ]
          })
        })
      }
    },
    mounted: function () {
      this.getYmdTypeDueCountsFn()
      this.getDeptDayCharts()
      this.getDeptOverdueCharts()
      this.getDeptSatisfyCharts()
      this.getStateCharts()
      // this.getSourceCharts()
      this.getDeptNumberCharts()
    }
  }
</script>
